<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查询</title>
    <link rel="stylesheet" href="css/weather.css">
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/weather.js"></script>
</head>
<body>

        <div class="w" id="weather">
            <div class="header">
                <h1>天气查询</h1>
            </div>
            <div class="search">
                <div class="search_hd">
                <input type="text" name="" id="" v-model="city" @keyup.enter="searchWeather">
                <button @click="searchWeather">查询</button>
                </div>
                <div class="search_fd">
                    <ul>
                        <li @click="clickSearch('广州')">广州</li>
                        <li @click="clickSearch('北京')">北京</li>
                        <li @click="clickSearch('深圳')">深圳</li>
                        <li @click="clickSearch('上海')">上海</li>
                    </ul>
                </div>
                
            </div>
            <div class="footer">
                <ul>
                    <li v-for="item in arr">
                        <h1>{{item.type}}</h1>
                        <p><span>{{item.low}}</span>-<span>{{item.high}}</span></p>
                        <p>{{item.date}}</p>
                    </li>
                    
                </ul>
            </div>
        </div>
        <script>
            var app=new Vue({
        el:"#weather",
        data:{
            city:"广州",
            arr:[]
        },
        methods:{
            searchWeather:function(){
                let that=this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
                .then(function(res){
                    that.arr=res.data.data.forecast;
                })
                .catch(function(err){
                    console.log(err);
                });
            },
            clickSearch:function(city){
                this.city=city;
                this.searchWeather();
            }

    }
    });
        </script>
    
</body>
</html>